<!-- 
  * @Description:产品服务 
  * @Author:lxy 
  * @Date:2023-03-23 10:23  
-->
<template>
  <div class="productService_box">
    <searchFrom  @forSubmit="resData" ref="searchFrom"></searchFrom>
    <el-button style="margin-bottom: 20px;" type="primary" icon="el-icon-search" @click="($event) => buttonClickFunction([], '新增')">新增</el-button>
    <!-- 表格组件 -->
    <tableTemplate v-bind="tableConfigObject" class="CHAGE_SCROLLBAR productService_table">
      <template slot="btnSlotName" slot-scope="{ item }">
        <el-button type="text" @click="($event) => buttonClickFunction(item, '查看')">查看</el-button>
        <el-button type="text" @click="($event) => buttonClickFunction(item, '编辑')">编辑</el-button>
        <el-button type="text" @click="($event) => buttonClickFunction(item, '删除')">删除</el-button>
      </template>
    </tableTemplate>
    <!-- 分页组件 -->
    <paginationTemplate
      v-bind="paginationObject" 
      @currentChangeFunction="resData"
    ></paginationTemplate>
    <!-- 弹出框测试 -->
    <taskInFoDialog ref="taskInFoDialogRef" @resData="resData"></taskInFoDialog>
  </div>
</template>

<script>
import searchFrom from "@/views/PageManagement/productService/components/searchFrom.vue";
import taskInFoDialog from "@/views/PageManagement/productService/components/taskInFoDialog.vue";
import tableTemplate from "@/components/TableTemplate.vue";
import paginationTemplate from "@/components/PaginationTemplate.vue";
import { fromConfig } from "./config/config";
import { viewPageMessage, delPageMessage } from "@/api/pageMessage";
export default {
  name: "productService",
  components: {
    searchFrom,
    tableTemplate,
    paginationTemplate,
    taskInFoDialog,
  },
  data() {
    return {
      tableConfigObject: {
        //表头数据
        elTableListData: [
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
          {
            textTitle: "智慧健康养老平台",
            briefIntroduction:
              "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管",
            imgData: "../img/shouye/1-2112091S601X9.jpg",
            mainBody: "智慧养老平台涵盖居家养老、机构养老、社区养老、医养结合、地产养老、旅居养老和政府监管。包括智慧养老运作模式，智慧养老产品，智慧化养老标准。...",
          },
        ],
        // 表头行配置
        elTableListConfig: fromConfig,
        
      },
      // 分页组件使用的数据
      paginationObject: {
        layout: "prev , pager, next, jumper",
        pageSize: 10,
        pageSizes: [10, 20, 30, 40],
        currentPage: 1,
        total: 40,
      },
    };
  },
  mounted() {
    this.getWebData();
  },
  methods: {
    buttonClickFunction(itVal, type) {
      if(type == "编辑" || type == "查看" || type == "新增"){
        this.$refs.taskInFoDialogRef?.handleOpen(itVal,type);
      }else if(type == '删除'){
        this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delDataFunction(itVal);
        }).catch(()=>{});
      }
    },
    getWebData() {
      let parm = {
        ...this.$refs.searchFrom.getSearchForm(),
        pageSize: this.paginationObject.pageSize,
        currentPage: this.paginationObject.currentPage,
        type:0
      };
      viewPageMessage(parm).then((res) => {
        this.tableConfigObject.elTableListData = res.data.data;
        this.paginationObject.total = res.data.totalpage;
      });
    },
    //删除数据
    delDataFunction(val) {
      delPageMessage(val).then(res=>{
        this.$notify({
          title: "提示",
          message: "删除成功",
          type: "success",
        });
        this.resData();
      })
    },
    //增删改查后 刷新数据
    resData(val = 1) {
      if (val != "编辑") this.paginationObject.currentPage = val;
      this.getWebData();
    },
  },
};
</script>

<style scoped lang="less">
.productService_box{
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 16px 30px;
}
.productService_table{
  height: 500px;
}
</style>
